<template>
  <el-dialog
    v-model="dVisible"
    :title="Props.title"
    :before-close="close"
    :destroy-on-close="true"
    class="popwindow"
    :width="Props.sizeType == 'small' ? '534px' : Props.sizeType == 'normal' ? '660px' : Props.sizeType == 'large' ? '900px' : '660px'"
    :close-on-click-modal="defaultModel"
    :show-close="defaultModel"
  >
    <slot name="header" v-if="Props.title"></slot>
    <div :style="'max-height:500px;padding: 10px 6px;overflow:auto;' + styles">
      <slot></slot>
    </div>
    <template #footer>
      <el-row justify="end" >
        <div>
          <el-button size="large" v-if="Props.btnType != 3 && Props.btnType != 0" @click="close">{{ Props.btnType == 4 ? "关 闭" : "取 消" }}</el-button>
          <el-button size="large" type="primary" @click="onSubmit" v-if="Props.btnType != 4 && Props.btnType != 5 && Props.btnType != 0">
            {{ Props.btnType == 1 ? "保存" : Props.btnType == 6 ? "确认" : "确定" }}</el-button
          >
        </div>
      </el-row>
    </template>
  </el-dialog>
</template>

<!-- 弹窗 -->
<script lang="ts" setup>
const dVisible = ref(false);
const Props = defineProps({
  title: {
    type: String,
    required: true,
  },
  // dialogVisible: {
  //   type: Boolean,
  //   required: true,
  //   default: false,
  // },
  sizeType: {
    type: String,
    default: "normal",
  },
  btnType: {
    // 1 取消 保存 2 取消 确定 3 确定 4 关闭 5 取消 6 取消 确认
    type: Number,
    default: 1,
  },
  styles: {
    type: String,
    vlaue: "",
  },
  defaultModel: {
    type: Boolean,
    vlaue: false,
  },
});

const open = ()=>{
  dVisible.value = true;
}

const emit = defineEmits(["success"]);
const close = () => {
  emit("success", false);
  dVisible.value = false;
};
const onSubmit = () => {
  emit("success", true);
  dVisible.value = false;
};

defineExpose({open})
</script>

<style lang="scss">
.el-dialog__footer {
  border-top: 1px solid #e7e7e7;
  padding-top: 20px;
}
.el-dialog__header {
  border-bottom: 1px solid #e7e7e7;
}
</style>